<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
    </style>
    <script>
        function printFun(){
            console.log("事件被触发")
        }
    </script>
</head>
<body>
    <!-- 鼠标左键的点击事件 -->
    <input type="button" value="click" onclick="printFun()">

    <br><br>
    <!-- 鼠标按下事件 -->
    <input type="button" value="mousedown" onmousedown="printFun()">
    <!-- 鼠标弹起事件 -->
    <input type="button" value="mouseup" onmouseup="printFun()">
    <br><br>
    <!-- 鼠标划入事件 和 鼠标划出事件 -->
    <div class="box" onmouseover="printFun()" onmouseout="printFun()"></div>
    <br>
    <!-- 鼠标移动事件 -->
    <div class="box" onmousemove="printFun()"></div>
    <br>
    <!-- 键盘按下事件 -->
    <input type="text" onkeydown="printFun()">
    <br>
    <!-- 键盘弹起事件 -->
    <input type="text" onkeyup="printFun()">

    <br>
    <!-- 输入事件 -->
    <input type="text" oninput="printFun()">
    <br>
    <!-- 输入完成事件，针对于输入法 => compositionend 只能通过 addEventListener 绑定  -->
    <input type="text" id="btns">

    <br>
    <!-- 内容改变事件 change => 输入事件+失去焦点事件 -->
    <select oninput="printFun()">
        <option>内容1</option>
        <option>内容2</option>
        <option>内容3</option>
        <option>内容4</option>
        <option>内容5</option>
    </select>
    <select onchange="printFun()">
        <option>内容1</option>
        <option>内容2</option>
        <option>内容3</option>
        <option>内容4</option>
        <option>内容5</option>
    </select>
    <br>
    <input type="text" onchange="printFun()">
    <br>
    <!-- 获取焦点和失去焦点事件 -->
    <input type="text" onfocus="printFun()" onblur="printFun()">

    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <script>
        let btnDom = document.querySelector("#btns");
        btnDom.addEventListener("compositionend",function(){
            console.log("compositionend 输入法完成");
        });
        // window 窗口的键盘事件
        window.addEventListener("keydown",function(){
            console.log("window窗口触发了键盘事件");
        })
    </script>
</body>
</html>